<template>
  <div class="app-container">

    <!-- <el-card shadow="always" style="margin-top: 20px;">
      <div class="chart-container">
        <div ref="pieChart" style="width: 50%; height: 200px;"></div>
        <div ref="barChart" style="width: 50%; height: 200px;"></div>
      </div>
    </el-card> -->

    <el-card shadow="always" style="margin-top: 20px;">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="160px">
        <el-row :gutter="20">
          <!-- 第一列 -->
          <el-col :span="22">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="所属方向" prop="deptId">
                  <el-select v-model="queryParams.deptId" placeholder="请选择所属研究方向" clearable>
                    <el-option
                      v-for="dept in deptList"
                      :key="dept.deptId"
                      :label="dept.deptName"
                      :value="dept.deptId"
                    />

                  </el-select>
                  </el-form-item>

                  <el-form-item label="统计年度" prop="statisticalYear">
                  <el-select v-model="queryParams.statisticalYear" placeholder="请选择统计年度" clearable>
                    <el-option
                    v-for="dict in dict.type.sci_year"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                    />
                  </el-select>
                  </el-form-item>



                <el-form-item label="报告名称" prop="reportName">
                  <el-input
                    v-model="queryParams.reportName"
                    placeholder="请输入报告名称"
                    clearable
                    @keyup.enter.native="handleQuery"
                  />
                  </el-form-item>
                  <el-form-item label="研究领域" prop="researchField">
                  <el-select v-model="queryParams.researchField" placeholder="请选择研究领域" clearable>
                    <el-option
                    v-for="dict in dict.type.sci_rch_field"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                    />
                  </el-select>
                  </el-form-item>



              </el-col>
              <el-col :span="24">
                <el-form-item label="所属项目" prop="userId">
                  <el-select
                    v-model="queryParams.projectId"
                    placeholder="请选择所属项目"
                    clearable
                  >
                    <el-option
                      v-for="project in projectList"
                      :key="project.projectId"
                      :label="project.projectName"
                      :value="project.projectId"
                    />
                  </el-select>
                </el-form-item>


                <el-form-item label="发表时间">
                  <el-date-picker
                    v-model="daterangePublishDate"
                    style="width: 208px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>


              </el-col>

            </el-row>
          </el-col>
          <!-- 第二列 -->
          <el-col :span="2">
            <el-row>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-row>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="always" style="margin-top: 20px;">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['system:report:add']"
          >新增</el-button>
        </el-col>

        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['system:report:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="ReportList" @selection-change="handleSelectionChange">
        el-table-column type="selection" width="55" align="center" />
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="统计年度" align="center" prop="statisticalYear">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sci_year" :value="scope.row.statisticalYear"/>
        </template>
        </el-table-column>
        <el-table-column label="所属方向" width="190" align="center" prop="deptId">
          <template slot-scope="scope">
            {{ getDeptLabel(scope.row.deptId) }}
          </template>
        </el-table-column>

        <el-table-column label="报告名称" align="center" prop="reportName" />
        <el-table-column label="研究领域" align="center" prop="researchField">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sci_rch_field" :value="scope.row.researchField"/>
        </template>
        </el-table-column>
        <el-table-column label="作者" align="center" prop="authors" />

        <el-table-column label="发表时间" align="center" prop="publishDate" width="110">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.publishDate, '{y}-{m}-{d}') }}</span>
        </template>
        </el-table-column>
        <el-table-column label="所属项目" align="center" prop="projectId">
          <template slot-scope="scope">
            {{ getProjectLabel(scope.row.projectId) }}
          </template>
        </el-table-column>
        <el-table-column label="是否上报政府部门" align="center" prop="isReported">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isReported"/>
        </template>
        </el-table-column>


        <el-table-column label="操作"  width="200" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="color: #409EFF;"
              @click="handleView(scope.row)"
              v-hasPermi="['system:report:query']"
            >查看</el-button>
            <el-button
               type="text"
              style="color: #E6A23C;"

              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:report:edit']"
            >修改</el-button>

            <el-button
               type="text"
              style="color: #F56C6C;"

              @click="handleDelete(scope.row)"
              v-hasPermi="['system:report:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 添加或修改科研报告信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
      <el-card shadow="always" style="margin-top: 20px;">
        <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="120px">
          <el-divider ><i class="el-icon-collection"></i>  基本信息</el-divider>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="报告名称" prop="reportName">
                <el-input v-model="form.reportName" placeholder="请输入报告名称" clearable
                  :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发表时间" prop="publishDate">
              <el-date-picker v-model="form.publishDate" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd" :style="{width: '100%'}" placeholder="请选择发表时间" clearable>
              </el-date-picker>
              </el-form-item>
            </el-col>



            <el-col :span="12">
              <el-form-item label="研究方向" prop="deptId">
                <el-select v-model="form.deptId" placeholder="请选择所属方向" clearable :style="{width: '100%'}">
                  <el-option
                    v-for="dept in deptList"
                    :key="dept.deptId"
                    :label="dept.deptName"
                    :value="dept.deptId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
			      <el-col :span="12">
              <el-form-item label="报告作者" prop="authors">
                <el-input v-model="form.authors" placeholder="请输入报告作者" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="研究领域" prop="researchField">
                <el-radio-group v-model="form.researchField" size="medium">
                  <el-radio
                    v-for="(item, index) in dict.type.sci_rch_field"
                    :key="index"
                    :label="item.value"
                    :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>



          </el-row>
          <el-divider ><i class="el-icon-postcard"></i>  详细信息</el-divider>
            <el-row :gutter="20">

              <el-col :span="12">
                <el-form-item label="统计年度" prop="statisticalYear">
                  <el-select v-model="form.statisticalYear" placeholder="请输入统计年度" clearable
                    :style="{width: '100%'}">
                    <el-option v-for="(item, index) in dict.type.sci_year" :key="index" :label="item.label"
                      :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>



              <el-col :span="12">
                <el-form-item label="所属项目" prop="projectId">
                  <el-select v-model="form.projectId" placeholder="请选择所属项目" clearable :style="{width: '100%'}">

                  <el-option
                    v-for="project in projectList"
                    :key="project.id"
                    :label="project.projectName"
                    :value="project.id"
                  />
                </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="是否上报政府" prop="isReported" >
                  <el-select v-model="form.isReported" placeholder="请选择是否上报政府部门" clearable :style="{width: '100%'}">
                    <el-option
                      v-for="dict in dict.type.sys_yes_no"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="报告摘要" prop="reportSummary">
                <el-input  type="textarea"
                :rows="3" v-model="form.reportSummary" placeholder="请输入报告摘要" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider ><i class="el-icon-folder-opened"></i>  附件文档</el-divider>


          <el-row v-for="(row, index) in form.fileRows" :key="row.id || index">
            <el-col :span="4">
              <el-form-item label="文件名称" :prop="'fileRows.' + index + '.fileClassName'" :rules="rules.fileRows.fileClassName" required>
                <el-select  v-model="row.fileClassName"
                filterable
                allow-create
                default-first-option
                 placeholder="请选择文件名称" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, optionIndex) in fileClassNameOptions" :key="optionIndex" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item  label="上传人" :prop="'fileRows.' + index + '.uploader'" :rules="rules.fileRows.uploader" >
                <el-input :disabled="true" v-model="row.uploader" placeholder="请输入上传人" clearable :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="上传时间" :prop="'fileRows.' + index + '.uploadTime'" :rules="rules.fileRows.uploadTime" >
                <el-input :disabled="true" v-model="row.uploadTime" placeholder="请输入上传时间" clearable :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="附件" :prop="'fileRows.' + index + '.fileInfo'" :rules="rules.fileRows.fileInfo" required>
                <file-upload v-model="row.fileInfo"
                @update:datetime="handleDatetimeUpdate(index, $event)"/>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-button circle type="danger" icon="el-icon-minus" size="small" @click="removeRow(index)"></el-button>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="2" :offset="11">
              <el-button circle type="info" icon="el-icon-plus" size="small" @click="addRow"></el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>





    <el-drawer
      title="报告信息"
      :visible.sync="drawer"
      size="50%">



      <el-card shadow="always" style="margin: 20px;">
        <el-descriptions title="基本信息" border  :column="2">
          <el-descriptions-item label="报告名称"  > {{this.formView.reportName}}</el-descriptions-item>
          <el-descriptions-item label="研究方向">{{ getDeptLabel(formView.deptId) }}</el-descriptions-item>
          <el-descriptions-item label="报告作者">
            {{this.formView.authors}}
          </el-descriptions-item>
          <el-descriptions-item label="研究领域">
            <dict-tag :options="dict.type.sci_rch_field" :value="formView.researchField"/>
          </el-descriptions-item>
          <el-descriptions-item label="发表时间"  > {{this.formView.publishDate}}</el-descriptions-item>

        </el-descriptions>
      </el-card>
      <el-card shadow="always" style="margin: 20px;">
        <el-descriptions title="详细信息" :column="3" border>


          <el-descriptions-item label="统计年度">
            <dict-tag :options="dict.type.sci_year" :value="formView.statisticalYear"/>
          </el-descriptions-item>
          <el-descriptions-item label="是否上报政府部门">
            <dict-tag :options="dict.type.sys_yes_no" :value="formView.isReported"/>
          </el-descriptions-item>
          <el-descriptions-item label="所属项目">
                  {{ getProjectLabel(this.formView.projectId) }}
          </el-descriptions-item>
          <el-descriptions-item label="论文摘要">
            {{this.formView.reportSummary}}
          </el-descriptions-item>

        </el-descriptions>
      </el-card>



      <el-card shadow="always" style="margin: 20px;">
        <el-descriptions title="附件文档" :column="1" border>
          <el-descriptions-item v-for="(row, index) in formView.fileRows" :key="'file-' + index" :label="row.fileClassName || '未命名文件'">
            <div>
              <p>
                <template v-if="row.fileInfo && row.fileInfo.length > 0">
                  <div v-for="(file, fileIndex) in row.fileInfo" :key="fileIndex" style="margin-top: 5px;">
                    <el-link
                      type="primary"
                      target="_blank"
                       @click="handleDownload(file)"
                    >
                      {{ file.originalName }}
                    </el-link>

                    <span style="margin-left: 8px; color: #909399; font-size: 12px">
                      ({{ (file.fileSize/1024).toFixed(2) }} KB)
                    </span>
                  </div>
                </template>
                <span v-else style="color: #909399">无附件</span>
              </p>
              <p>上传人: {{ row.uploader }}</p>
              <p>上传时间: {{ row.uploadTime }}</p>

            </div>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-drawer>



  </div>
</template>

<script>
import { listReport, getReport, delReport, addReport, updateReport } from "@/api/sci/report";

import * as echarts from 'echarts';
import { listDept } from '@/api/system/dept';
import { listProjectInfo } from '@/api/sci/projectInfo';
import { downloadMinioFile } from '@/api/common/common';


export default {
  name: "Report",
  dicts: ['sci_rch_field', 'sci_year', 'sys_yes_no'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 报告信息表格数据
      ReportList: [],
      // 弹出层标题
      title: "",

      open: false,
       // 是否显示弹出层
      openStatus: false,

      drawer: false,


      // 时间范围
     daterangePublishDate: [],
      username : this.$store.state.user.nickName,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: null,
        reportName: null,
        researchField: null,
        authors: null,
        deptId: null,
        publishDate: null,
        reportSummary: null,
        statisticalYear: null,
        isReported: null,
      },
      projectList: [],
      deptList: [],


      // 表单参数
      form: {
        fileRows: [
          {
            fileClassName: '',
            uploader: '',
            uploadTime: '',
            fileInfo: []
          }
        ]
      },

      formView: {
        fileRows: [] // 初始化为空数组
      },
      // 表单校验
      rules: {
        reportName: [
          { required: true, message: "报告名称不能为空", trigger: "blur" }
        ],
        researchField: [
          { required: true, message: "研究领域不能为空", trigger: "change" }
        ],
        authors: [
          { required: true, message: "作者不能为空", trigger: "blur" }
        ],
        deptId: [
          { required: true, message: "所属研究方向/部门ID不能为空", trigger: "change" }
        ],
        publishDate: [
          { required: true, message: "发表时间不能为空", trigger: "blur" }
        ],
        reportSummary: [
          { required: true, message: "报告摘要不能为空", trigger: "blur" }
        ],
        statisticalYear: [
          { required: true, message: "统计年度不能为空", trigger: "change" }
        ],
        isReported: [
          { required: true, message: "是否上报政府部门不能为空", trigger: "change" }
        ],

        fileRows: {
          fileClassName: [
            { required: true, message: '请选择文件名称', trigger: 'change' }
          ],

          fileInfo: [
            { required: true, message: '请上传附件', trigger: 'change' }
          ],
        },

        // 'fileRow.fileClassName': [{ required: true }],
        // 'fileRow.fileInfo': [{ required: true }]

      },

      fileClassNameOptions: [{
          "label": "报告原文",
          "value": "报告原文"
        }, {
          "label": "其他",
          "value": "其他"
        }
      ],

    };
  },
  created() {
    this.getList();
    this.getProjectList();
    this.getDeptList();
  },
  mounted() {
    // this.getList();
    this.initPieChart();
    this.initBarChart();
  },

  methods: {
    /** 查询科研报告信息列表 */
    getList() {
      this.loading = true;

      listReport(this.queryParams).then(response => {
        this.ReportList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openStatus = false;
      this.reset();
      this.resetStatus();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        projectId: null,
        reportName: null,
        researchField: null,
        authors: null,
        deptId: null,
        publishDate: null,
        reportSummary: null,
        statisticalYear: null,
        isReported: null,
        createdBy: null,
        createdTime: null,
        updatedBy: null,
        updatedTime: null,
        fileRows: [  // 保持基础结构
          {
            fileClassName: '',
            uploader: '',
            uploadTime: '',
            fileInfo: []
          }
        ]
      };
      this.resetForm("form");
    },

    resetView() {
      this.formView = {
		    id: null,
        projectId: null,
        reportName: null,
        researchField: null,
        authors: null,
        deptId: null,
        publishDate: null,
        reportSummary: null,
        statisticalYear: null,
        isReported: null,
        createdBy: null,
        createdTime: null,
        updatedBy: null,
        updatedTime: null,
        fileRow:   // 保持基础结构
          {
            fileClassName: '',
            uploader: '',
            uploadTime: '',
            fileInfo: []
          }

      };
	  this.resetForm("formView");
    },
    handleDatetimeUpdate(index, datetime) {
      // Update the corresponding uploadTime field
      this.$set(this.form.fileRows[index], 'uploadTime', datetime);
    },
    handleStatusDatetimeUpdate(datetime) {
      // Update the corresponding uploadTime field
      this.$set(this.formStatus.fileRow, 'uploadTime', datetime);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加报告信息";
      this.form.fileRows[0].uploader = this.username;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getReport(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改报告信息";
      });
    },
    handleView(row) {
      this.resetView();
      const id = row.id || this.ids
      getReport(id).then(response => {

        if (response.data && response.data.fileRows) {
          response.data.fileRows = response.data.fileRows.map(fileRow => {
            try {
              // 如果fileInfo是字符串则转换为数组，否则保持原样
              fileRow.fileInfo = typeof fileRow.fileInfo === 'string'
                ? JSON.parse(fileRow.fileInfo)
                : fileRow.fileInfo;
            } catch (e) {
              console.error('fileInfo解析失败：', e);
              fileRow.fileInfo = [];
            }
            return fileRow;
          });
        }
        this.formView = response.data;

        this.drawer = true;
      });
    },


    handleDownload(file) {
      const fileName = file.url; // 替换为实际的文件名
      downloadMinioFile(fileName);
    },


    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const trimmedForm = this.trimFormFields(this.form);
          if (this.form.id != null) {
            updateReport(trimmedForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addReport(trimmedForm).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              })

          }
        }
      });
    },
    trimFormFields(form) {
      const trimmedForm = { ...form };
      for (const key in trimmedForm) {
        if (typeof trimmedForm[key] === 'string') {
          trimmedForm[key] = trimmedForm[key].trim();
        }
      }
      return trimmedForm;
    },


    getProjectLabel(projectId) {
      const project = this.projectList.find(p => p.id === projectId);
      return project ? project.projectName : '';
    },

    getDeptLabel(deptId) {
      const dept = this.deptList.find(d => d.deptId === deptId);
      return dept ? dept.deptName : '';
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      const name=row.reportName;
      this.$modal.confirm('是否确认删除科研报告信息名为"' + name + '"的数据项？').then(function() {
        return delReport(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/Report/export', {
        ...this.queryParams
      }, `Report_${new Date().getTime()}.xlsx`)
    },

    getProjectList() {
      listProjectInfo().then(response => {
        this.projectList = response.rows;
      });
    },
    getDeptList() {
      listDept().then(response => {
        this.deptList = response.data.filter(dept => dept.deptId !== 100);      });
    },

    addRow() {

      this.form.fileRows.push({
        fileClassName: '',
        uploader: this.username,
        uploadTime: '',
        fileInfo: [],
      });
    },
    removeRow(index) {
      if (this.form.fileRows.length > 1) {
        this.form.fileRows.splice(index, 1);
      } else {
        this.$message.warning('至少需要保留一行');
      }
    },
    initPieChart() {
      const pieChart = echarts.init(this.$refs.pieChart);
      const pieOption = {
        title: {
          text: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '报告类型',
            type: 'pie',
            radius: ['40%', '70%'], // Outer and inner radius to create a ring chart
            center: ['50%', '50%'],
            data: [
              { value: 335, name: '已投稿' },
              { value: 310, name: '已接收' },
              { value: 234, name: '已发表' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        graphic: {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: '报告状态分布',
            textAlign: 'center',
            fontSize: 12,
            fontWeight: 'bold'
          }
        }
      };
      pieChart.setOption(pieOption);
    },

    initBarChart() {
      const barChart = echarts.init(this.$refs.barChart);
      const barOption = {
        title: {
          text: '九大方向报告数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['能源战略', '智慧矿山', '新型储能', '分布式能源', '地清', 'CCUS', '节能减碳', '能源大数据', '能源软件']
        },
        yAxis: {
          type: 'value'
        },
        grid: {
            left: '4%',
            right: '30%',
            bottom: '12%',
            containLabel: true
          },
        series: [
          {
            name: '报告数量',
            data: [120, 200, 150, 80, 70, 110, 130, 140, 160],
            type: 'bar',
            barWidth: '40%',
          }
        ]
      };
      barChart.setOption(barOption);
    }
  }
};
</script>


<style scoped>
.chart-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.center-button {
  display: flex;
  justify-content: center;
}

.card-title {
  font-family: SimHei, sans-serif;
  font-weight: bold;
}
</style>
